cascading style sheets reference
נכנסים לעניינים
מספיק ללכת סחור-סחור; הגיע הזמן להתחיל להפוך את ה-css-ים לפעילים.
בפעם האחרונה, ב "כיצד פועלים css-ים?" ?" ראינו כי css הוא סדרה של הצהרות.. קיימים מספר סוגים של הצהרות:
נעיף מבט זריז בכל אחד מאלה, אך הסוג החשוב ביותר עבורנו הוא הכללים (Rules), שאותם נשאיר לסוף.
@rules
אפשר לחשוב על @rule כסוג של הוראת מאקרו שאומרת לדפדפן משהו שונה מאשר כיצד לתאר אלמנטים. עבור המטרות שלנו (ב-css1) ה-@rule היחיד התקף הוא
ה- @import rule. ה- @import אומר לדפדפן לייבא css ממקום אחר ולהשתמש בו יחד עם ה-css הנוכחי. CSS עם @import rule עושה דירוג מה-css המיובא. כך עובד הדירוג שראינו בפרק של דירוג וירושה.
ל- @import rule יש את הפורמט הבא:
@import url(http://www.cnn.com/news/sport);
כאלטרנטיבה, ניתן להשתמש גם בצורה הבאה:
@import "http://www.cnn.com/news/sport";
ה-url יכול להיות או קובץ מקומי (במקרה זה אתם משתמשים ב-url יחסי), או ב-url מוחלט, כמו במקרה הזה.
Css2 הציג בפנינו את רעיון המדיה ומאפשר ייבוא מותנה של css-ים המבוססים על המדיה שדרכה מוצג הדף. עבור מידע נוסף לגבי ייבוא מותנה זה של מדיה, בדקו את החלק על המדיה.
הערות
מכיוון שבני אדם חייבים להתפתח, לערוך ולחלוק css-ים, אז ניתן גם להעיר עליהם.
/*This is a style sheet comment */ : הצורה של הערה היא
הערות יכולות להיות רב-שורתיות (multi-lined).
@media Rules
ה-@media rules הוצגו בפנינו עם ה-css2. הם מאפשרים לחלקים מה-css להיות בשימוש רק כשמדיה מסוימת נמצאת בשימוש להצגת הדף. לדוגמא, ניתן ליצור @media rule שמתישם רק כאשר הדף הוא בהדפסה.
ל- @media rules יש צורה של מילת המפתח, @media ואחריה פסיק שאחריו רשימה נפרדת של שמות מדיה, אחריהם החוקים שהולכים ליישם לקבוצת מדיה זו, ובסוף סוגריים מסולסלים (curly brackets). לדוגמא, החוק הבא ישנה רק את צבע הרקע ללבן כשהדף ייצא להדפסה:
@media print {
BODY {background-color: white}
}
אנו נלמד על החוקים בהמשך.
אנו נלמד יותר על @media rules בחלק מאוחר יותר ובמדיה שונה.
@page Instructions
instructions הוצגו בפנינו עם ה-css2 כדי לאפשר שליטה טובה יותר בהדפסה של דפים. צורת @page instruction היא כשל מילת המפתח @page, ואחריו מספר חוקים ספציפיים להדפסה המוכלים בתוך סוגריים מסולסלים. דוגמא ל@page rule היא
@page {
margin: 5%
}
אנו נסקור ביתר פירוט את ה-@page instructions בחלק על הדפסה.
תוויות הערה של HTML
בגלל שדפדפנים ישנים יותר אינם תומכים ב-css-ים, בכדי להבטיח שדפדפנים אלה לא יציגו css המשולב בהם כטקסט, css-ים יכולים לכלול תוויות הערה של HTML : ( - - - ! > ) . אתם לא צריכים לדאוג בקשר לאלה. אסור לשים HTML comment tags ב-css-ים חיצוניים.
Rules
הכללים או קבוצות הכללים (Rule sets) מעסיקים אותנו בראש ובראשונה.Rule הוא הצהרה שאומרת לדפדפן כיצד לתאר אלמנט מסוים בדף האתר. .
לחוק (rule) יש שני חלקים, בורר (selector) והכרזה (declaration). אנו נרד לפרטים של כל אחד מהם, כיוון שהבנת שניהם היא חיונית לעבודה עם css-ים
הבורר מזהה או בוחר את האלמנטים שבדף האתר שמושפעים ע"י חוק זה.
לכן, ההכרזה אומרת לדפדפן כיצד לתאר כל אלמנט שהוא בדף שנבחר ע"י הבורר.
. נשמע לכם קצת מסובך? זהו רעיון מסובך, כיוון שככל הנראה זה שונה מהניסיון שיש לכם עם css-ים, בוא נאמר, במעבד מילים.
הבא נתעכב על דוגמא או שתיים.
אחד מהאלמנטים הנפוצים ביותר בדף אתר הוא הפסקה. אם אתם בקיאים ב-HTML, זהו אלמנט ה- <p></p>. חוק פשוט מאוד יכול להגיד לדפדפן כיצד לתאר פיסקה.
נניח ואנו רוצים שכל הטקסט בפסקאות יהיה בפונט שאתם רואים כעת (אני מקווה), ורדנה. ב-css, אנו רוצים ליצור חוק שבורר פסקאות, או במילים אחרות, אנו רוצים ליצור בורר פיסקה. נשמע מסובך? ובכן, מתחת נמצא בורר הפסקה
<P>
יש לכם איזשהם ניחושים עבור הבורר שיבחר את גוף המסמך? אם ניחשתם BODY (או body) צדקתם. בפשטות, זוהי התווית לאלמנט זה, ללא ה- <and>.
בנוסף לבוררים של אלמנטים של HTML Element Selectors , ישנם מספר סוגים חשובים אחרים של בורר, שנכסה בחלק הבא..
כעת, התוכנית שלנו הייתה ליצור חוק שאומר לדפדפן לתאר פסקאות בפונט מסוים. אנו יצרנו את הבורר, אך כעת עלינו ליצור הכרזה שאומרת לדפדפן כיצד עליו לתאר את האלמנטים הנבחרים.
הכרזות נמצאות בתוך סוגריים מסולסלים {-and-} ומכילות מאפיין אחד או יותר, המופרדים ע"י נקודה-פסיק (;). בדוגמא שלנו, ההכרזה תהיה :
{font-family: verdana}
ואם יש לנו שאיפות גדולות, ואנו רוצים שהטקסט יופיע באדום, תהיה לנו ההכרזה הבאה :
{font-family: verdana; color: red}
אם נבחר את הבורר להכרזה ביחד, נקבל הצהרה מלאה :
P {font-family: verdana; color: red}
בחלק זה
בשיעור זה בחנו את אבני הבניין העיקריות של css - אלו הן סוגי ההצהרות השונות.
הקדשנו מעט תשומת לב לסוג ההצהרה החשוב ביותר, החוקים, וראינו כיצד לחוק יש בורר שמזהה את האלמנטים בדף, והכרזה - סדרת אפיונים שאומרת לדפדפן כיצד לתאר את האלמנטים הנבחרים.
אם אתם מרגישים שהתקדמנו מהר מידיי בחומר הזה, אז אתם צודקים. אנו נתמקד הרבה יותר בשני הבוררים, ובאפיונים, בשיעורים הבאים.
בחלק הבא
בחלק הבא נתעכב על בוררים, כיצד הם עובדים וכיצד להשתמש בהם.
|
